.tabs {
	margin-bottom: 0.5rem;

	border-bottom: 2px solid var(--input-border-color);
}

.tabs-wrapper {
	display: flex;

	width: 100%;

	margin: 0 -1rem -2px;
}

.tab {
	display: flex;

	margin: 0 1rem;

	cursor: pointer;

	transition: all 0.3s;

	color: var(--rc-color-primary-light);

	border-bottom: 2px solid transparent;

	font-family: inherit;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.25rem;
	align-items: stretch;
	flex-flow: row nowrap;

	&.active {
		color: var(--rc-color-button-primary);
		border-bottom-color: var(--rc-color-button-primary);
	}

	&:focus {
		text-decoration: underline;
	}

	& > span {
		flex: 1;

		padding: 1rem 0;
	}
}
